
<div class="diyumodal" id="diyumodal" ng-click="containHidden($event)">
  <div class="city-layer">
    <span class="cursor positionA layer-close" ng-click="submit('1')"><i class="iconfont bigSize">&#xe608;</i></span>
    <div class="title">行政区域定向</div>
    <div class="input-box">
      <div class="contain" ng-click="containShow($event)">
        <div class="search fl">
          <input type="text" ng-model="targetPlace" placeholder="搜索城市">
          <ul class="dropDown" ng-show="dropShow">
            <li class="" ng-repeat="matchResult in matchResults track by $index" ng-init="outerIndex=$index">
              <div class="fl">{{matchResult.name}}</div>
              <div class="fCheckBox noSelect fr spaceBefore">
                <input type="checkbox" id="{{outerIndex}}" ng-model='matchResult.checked'>
                <label class="" for="{{outerIndex}}" ng-click="addPlace2(matchResult,$index)">
                  </label>
              </div>
            </li>
          </ul>
        </div>
        <button class="yellowBtn" ng-click="search()">搜索</button>
      </div>
    </div>
    <div class="selTitle">
      <label>可选城市</label>
      <label class="clear">已选择
      <span class="clearContent fr MR10" ng-click="deleteAll()">清空</span>
    </label>
    </div>
    <div class="main clear">
      <div class="left-body">
        <ul>
          <li ng-repeat="province in provinces track by $index" class="province" ng-init="outerIndex=$index">
            <span class="more" ng-click="showCity(province)"><sapn ng-show="!(province.cityList&&province.cityList.length&&province.open)">+</sapn><span ng-show="province.cityList&&province.cityList.length&&province.open">-</span></span>{{province.text}}
            <div class="fCheckBox noSelect fr spaceBefore">
              <input type="checkbox" id="{{outerIndex}}" ng-model='province.checked'>
              <label class="" for="{{outerIndex}}" ng-click="addPlace(province,$index)">
              </label>
            </div>
            <ul ng-show="province.cityList&&province.cityList.length&&province.open">
              <li ng-repeat="city in province.cityList track by $index" class="city" ng-init="middleIndex=$index"><span class="more" ng-click="showCounty(city)"><sapn ng-show="!(city.countyList&&city.countyList.length&&city.open)">+</sapn><span ng-show="city.countyList&&city.countyList.length&&city.open">-</span></span>{{city.text}}
                <div class="fCheckBox noSelect fr spaceBefore">
                  <input type="checkbox" id="{{outerIndex+''+middleIndex}}" ng-model='city.checked'>
                  <label class="" for="{{outerIndex+''+middleIndex}}" ng-click="addPlace(province,city,$index)">
                  </label>
                </div>
                <ul ng-show="city.countyList&&city.countyList.length&&city.open">
                  <li ng-repeat="county in city.countyList track by $index" class="county" ng-init="innerIndex=$index">
                    {{county.text}}
                    <div class="fCheckBox noSelect fr spaceBefore">
                      <input type="checkbox" id="{{outerIndex+''+middleIndex+''+innerIndex}}" ng-model='county.checked'>
                      <label class="" for="{{outerIndex+''+middleIndex+''+innerIndex}}" ng-click="addPlace(province,city,county,$index)">
                      </label>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div class="right-body">
        <div class="box-contain">
          <ul>
            <li class="chosed-city" ng-repeat="chosedPlace in selectedPlace">
              {{chosedPlace.name}}
              <i class="iconfont fr font12 cursor" ng-click="remove($index)">&#xe73e;</i>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="btnContainer">
      <button ng-click="submit('1')">取消</button>
      <button ng-click="submit('2')">确定</button>
    </div>
  </div>
</div>

<style>
  .box-contain {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 14px;
  }

  .diyumodal {
    position: fixed;
    z-index: 999999999;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
  }

  .city-layer {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
  }

  .city-layer button {
    width: 100px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
  }



  .yellowBtn {
    color: rgb(255, 255, 255);
    background-color: #ffb135;
    border: none;
  }

  .city-layer {
    background-color: #fff;
    position: relative;
    width: 700px;
  }

  .layer-close {
    position: absolute;
    right: 50px;
    top: 50px;
    width: 50px;
    height: 50px;
    background: #fff;
    z-index: 1000
  }

  .title {
    color: #000;
    font-size: 16px;
    margin-left: 34px;
    padding-top: 20px;
    padding-left: 16px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
    position: relative;
  }

  .title::before {
    content: '';
    display: block;
    width: 5px;
    height: 30px;
    background-color: #ffb135;
    position: absolute;
    left: 0;
    top: 20px;
  }

  .layer-close {
    border: 0;
    width: 30px;
    height: 30px;
    font-size: 20px;
    background: #fff;
    color: #fdb044;
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .input-box {
    padding: 20px 30px;
    text-align: left;
  }

  .input-box .contain {
    display: inline-block;
    position: relative;
  }

  .search {
    font-size: 14px;
    /* float: left; */
    margin-left: 8px;
    margin-right: 0;
    position: relative;
  }

  .input-box input {
    height: 34px;
    width: 310px;
    line-height: 34px;
    padding: 0px 10px;
  }

  .input-box button {
    float: left;
  }

  .dropDown {
    border: 1px solid #d2d2d2;
    border-top: none;
    padding: 5px 10px;
    line-height: 20px;
    position: absolute;
    top: 34px;
    left: 0;
    width: 100%;
    z-index: 1001;
    background: #fff;
  }

  .selTitle {
    margin-left: 40px;
  }

  .selTitle .clearContent {
    color: #fc575b;
  }

  .selTitle label {
    width: 300px;
    font-size: 14px;
  }

  .selTitle label:last-child {
    margin-left: 20px;
  }

  .main {
    overflow: hidden;
    padding: 0px 40px;
  }

  .main .left-body,
  .right-body {
    width: 300px;
    height: 400px;
    padding: 10px;
    float: left;
    text-align: center;
    border: 1px solid #ebebeb;
  }

  .main .left-body {
    margin-right: 15px;
    overflow-y: auto;
  }

  .left-body .province {
    text-align: left;
    line-height: 30px;
    padding-left: 10px;
    font-size: 14px;
    position: relative;
    margin-bottom: 5px;
  }

  .city {
    text-align: left;
    line-height: 30px;
    padding-left: 20px;
    font-size: 14px;
    border-left: none;
    border-right: none;
    position: relative;
    margin-bottom: 5px;
  }

  .county {
    text-align: left;
    line-height: 30px;
    padding-left: 40px;
    font-size: 14px;
    border-left: none;
    border-right: none;
    position: relative;
    margin-bottom: 5px;
  }

  .right-body .clear-button {
    width: 100%;
    text-align: right;
  }

  .right-body h1 {
    font-size: 20px;
    text-align: left;
  }

  .right-body .chosed-city {
    text-align: left;
    margin-top: 10px;
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
  }

  .btnContainer {
    text-align: center;
    padding: 20px 0;
  }

  .btnContainer button {
    width: 152px;
    height: 50px;
    line-height: 50px;
    background: #ffb135;
    border: 0;
    border-radius: 30px;
    margin-right: 30px;
    color: #fff;
    font-size: 14px;
  }

  .btnContainer button:nth-child(1) {
    background: #fff;
    border: 1px solid #ffb135;
    color: #ffb135;
  }

  .more {
    display: inline-block;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 15px;
    border-radius: 50%;
    background-color: #f97a7f;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 6px;
  }

  .chosed-city .delete {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 17px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    float: right;
    margin-top: 5px;
    transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    /* IE 9 */
    -moz-transform: rotateZ(45deg);
    /* Firefox */
    -webkit-transform: rotateZ(45deg);
    /* Safari 和 Chrome */
    -o-transform: rotateZ(45deg);
    /* Opera */
  }

  .unchoose {
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    /*线上的*/
    /*background-image: url(../../../../iFengChao-UI/lib/img/weixuan1.png);*/
    /*本地的*/
    background-image: url(./lib/img/weixuan1.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: left center;
    float: right;
    margin-top: 5px;
    margin-right: 20px;
  }

  .chosed {
    display: inline-block;
    width: 20px;
    height: 20px;
    cursor: pointer;
    /*线上的*/
    /*background-image: url(../../../../iFengChao-UI/lib/img/yixuan1.png);*/
    /*本地的*/
    background-image: url(./lib/img/yixuan1.png);
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: left center;
    float: right;
    margin-top: 5px;
    margin-right: 20px;
  }

  .search-contain {
    width: 400px;
    text-align: left;
    position: absolute;
    border: 1px solid #ebebeb;
    top: 30px;
    z-index: 100;
    background-color: #fff;
  }

  .search-contain li {
    width: 100%;
    height: 30px;
    text-align: left;
    line-height: 30px;
    padding-left: 10px;
    font-size: 16px;

    position: relative;
    margin-bottom: 5px;
  }

  .hidden {
    display: none;
  }

  .left-body .fCheckBox {
    padding: 0;
  }

  .left-body .fCheckBox label {
    cursor: pointerpointer;
  }
.dropDown li{
  height: 30px;
  line-height: 30px;
}



</style>